import QtQuick 2.0
import Qt.labs.presentation 1.0
import com.ics.TimerClock 1.0

Presentation
{
    id: frmParent
    width: 1024
    height: 768
    property color textColor: "#e6e6ff"
    property color contentColor: "#0041a2"
    property int pageNumber: 1

    //---------------------- TOP/LOWER BAR ----------------------//
    Rectangle {
        id: rectTopbar
        color: "#333333"
        anchors { left: parent.left; right: parent.right; top: parent.top }
        height: parent.height * 0.16

    }

    Rectangle {
        id: rectLowerbar
        color: "#333333"
        anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
        height: parent.height * 0.16

        function setClockVisibility(state)
        {
            clkTimer.visible = state
        }

        function setCounterVisibility(state)
        {
            txtCurrentPage.visible = state
        }

        Clock {
            id: clkTimer
            visible: false
            //clockBackground: Qt.resolvedUrl("imgs/clock.png")
            backgroundImage.source: Qt.resolvedUrl("imgs/clock.png")
            width: parent.height * 0.9; height: parent.height * 0.9
            timerMode: true; timerAlarmMinutes: 40;
            secondHandVisible: false
            anchors { right: parent.right; bottom: parent.bottom }
        }

        Text {
            id: txtCurrentPage
            visible: false
            text: "slide #" + frmParent.pageNumber
            anchors { left: parent.left; verticalCenter:
                parent.verticalCenter }
            color: "#e6e6ff"
            font { pixelSize: 20 }
        }
    }

    function switchSlides(from, to, forward) {
        (forward == true) ? pageNumber += 1 : pageNumber -= 1
        from.visible = false
        to.visible = true
        if (from == sldFirst) {
           rectLowerbar.setClockVisibility(true)
           rectLowerbar.setCounterVisibility(true)
        } else if (to == sldFirst) {
           rectLowerbar.setClockVisibility(false)
           rectLowerbar.setCounterVisibility(false)
        }

        return true
    }

    //----------------------  BASICS ---------------------------//
    Slide {
        id: sldFirst
        title: "Effective QML: basic elements"
        Image {
            source: "imgs/basicQmlbackground.jpg"

            anchors {
                fill: parent; topMargin: -(parent.height * 0.055)
                bottomMargin: (parent.height * 0.09)
                rightMargin: -(parent.width * 0.06)
                leftMargin: -(parent.width * 0.06)
            }
        }

        Text {
            id: txtAuthor
            text: "Adenilson Cavalcanti"
            color: "#e6e6ff"
            font { pixelSize: 28; }
            anchors { right: parent.right; bottom: parent.bottom;
                bottomMargin: 0.02 * parent.height }

            Text {
                id: txtTitles
                text: "BSc. MSc.\nKDE developer\nWebKit contributor"
                color: "#e6e6ff"
                font { pixelSize: 20; }
                anchors { top: parent.bottom; left: parent.left; }
            }
        }

    }

    Slide {
        Text { text: "Second part: QML basics"; color: "black";
            anchors { horizontalCenter: parent.horizontalCenter
                verticalCenter: parent.verticalCenter
            }
            font { pixelSize: 42 }
        }
    }

    Slide {
        title: "QML elements: Rectangle"
        RunnableCode {
            anchors { right: parent.right; top: parent.top; fill: parent }
        }
    }

    Slide {
        title: "Yes, slides are QML too..."
        Image {
            source: "imgs/dog-food.jpg"
            fillMode: Image.PreserveAspectFit
            anchors { fill: parent; topMargin: -(parent.height * 0.055)
                bottomMargin: (parent.height * 0.09)
                rightMargin: -(parent.width * 0.06)
                leftMargin: -(parent.width * 0.06)
            }
        }
    }

    Slide {
        title: "QML elements: Image"
        RunnableCode {
            anchors { right: parent.right; top: parent.top; fill: parent; }
            script: "
            import QtQuick 2.0
            Image {
                //source: \"http://www.google.com/images/srpr/logo3w.png\"
                source: \"imgs/totem1.png\"
            }
            "

        }
    }

    Slide {
        title: "QML elements: Text"
        RunnableCode {
            anchors { right: parent.right; top: parent.top; fill: parent }
            script: "
            import QtQuick 2.0
            Text {
                text: \"Hello world!\"
                color: \"#333333\"
                font { pixelSize: 38 }
            }
            "

        }
    }

    Slide {
        title: "QML elements: Editable Text"
        RunnableCode {
            anchors { right: parent.right; top: parent.top; fill: parent }
            script: "
            import QtQuick 2.0
            TextInput {
                text: \"Editable text\"
                color: \"#333333\"
                font { pixelSize: 38 }
            }
            "

        }
    }

    Slide {
        title: "QML elements: putting it all together"
        RunnableCode {
            anchors { right: parent.right; top: parent.top; fill: parent }
            fontSize: 16
            script: "
import QtQuick 2.0
Item {
    id: itemParent
    property string current: \"imgs/home.png\"
    property string background: \"imgs/home.png\"
    property string pressed: \"imgs/home_focused.png\"
    property string text: \"Home\"
    Image {
        id: imgBackground
        source: itemParent.current
        anchors { verticalCenter: parent.verticalCenter;
                  horizontalCenter: parent.horizontalCenter }
        MouseArea { anchors.fill: parent
		  onPressed: itemParent.current = itemParent.pressed
		  onClicked: itemParent.current = itemParent.background
        }
        Text { text: itemParent.text; font { pixelSize: 28 }
               anchors { horizontalCenter: parent.horizontalCenter
                         top: parent.bottom }
        }
    }
}
            "

        }
    }

    Slide {
        title: "QML elements: The ListView"
        content: [
            "Kinetic scrolling list",
            "Model: data (number of elements, properties)",
            "Delegate: how to paint elements",
        ]
    }


    Slide {
        title: "QML elements: The ListView example"
        RunnableCode {
            anchors { right: parent.right; top: parent.top; fill: parent }
            script: "
            import QtQuick 2.0

            Item {
                id: item
                width: 200; height: 400

                ListView {
                    anchors.fill: parent
                    model: Model { }
                    delegate: Delegate { }
                }

            }
            "

        }
    }

    Slide {
        title: "QML elements: ListView delegate"

        CodeSection {
            id: csDelegate
            anchors { left: parent.left; top: parent.top }
            width: parent.width * .55
            text: "
Image {
    id: image
    source: picture

    Text {
        id: text
        text: type + \" \" + age
        font.family: \"Univers LT Std\"
        color: \"#c81010\"
        font.pixelSize: 22
        anchors.left: image.right
    }
}
"
        }

        Image {
            source: "imgs/grommit.png"
            anchors { top: parent.top; right: parent.right}
        }

    }

    Slide {
        title: "QML elements: ListView delegate"
        content: [
            "Amount of items",
            "Properties (names, \nimage files, etc)",
            "Can be exploited...",
        ]

        CodeSection {
            id: csModel
            width: parent.width * 0.59
            anchors { right: parent.right; top: parent.top }
            text: "
ListModel {
        ListElement { type: \"Dog\"; age: 8; \n   picture: \"imgs/preston.jpg\" }
        ListElement { type: \"Bunny\"; age: 5; \n   picture: \"imgs/hutch.jpg\" }
        ListElement { type: \"Penguin\"; age: 8; \n   picture: \"imgs/feathers.jpg\" }
        ...
}
"
        }

    }

    //--------------------- GOOD PRACTICES -------------------------//
    Slide {
        Text { text: "Third part: QML good practices"; color: "black";
            anchors { horizontalCenter: parent.horizontalCenter
                verticalCenter: parent.verticalCenter
            }
            font { pixelSize: 42 }
        }
    }

    DualSlide {
        id: dslStyle
        title: "Tip 1: Coding style"
        width: parent.width
        wrongCode: "
        Item { //Forget to add new lines
        signal enabled()
        Rectangle {
          id: aStupidIdDontTellTheType
          //Great! Put everything in a single line
          width: 35; height: 35; color: \"transparent\";
          radius: 5
          border.color: \"black\"; border.color: width: 1 }
        }
        property string label: \"myCheckbox\"
    // Lousy indentation
    signal disabled()
         //Here is the id (obvious comment)
        id: lookMommyIdAtTheEnd
        "


        rightCode: "//Id, properties, signals, functions, children, states
        Item {
        id: parent

        property string label: \"myCheckbox\"
        signal enabled()
        signal disabled()

        Rectangle {
          id: rectRound
          width: 35; height: 35
          color: \"transparent\";
          border { color: \"black\" width: 1 }
          radius: 5
        }

        // Followed by other children, states, transitions
            "
    }

    Slide {
        title: "Tip 2: Add qsTr() in all strings"
        content: [
            "Mark translatable strings",
            "Has negligible cost",
            "Save time later in the\n project",
        ]

        CodeSection {
            anchors { right: parent.right; top: parent.top }
            text: "
Text {
   id: txtTranslate
   text: qsTr(\"Hello\")
}
"
        }

    }

    Slide {
        title: "Tip 3: Run in qmlscene <b>and<b> C++"
        Text {
           font { pixelSize: 34 }
           anchors { top: parent.top; left: parent.left }
           text: "Instead of qrc://image.png <b>use</b> \"image.png\""
        }

        Image {
           source: "imgs/cellar_cpp_viewer.png"
           fillMode: Image.PreserveAspectFit
           anchors { right: parent.right; top: parent.top;
                    bottom: parent.bottom;
                    topMargin: 60
                    bottomMargin: (parent.height * 0.09)
          }

        }
    }

    DualSlide {
        title: "Tip 4: Avoid unnecessary items"
        wrongCode: "
Component {
        Item {
            height: 100
            Image {
                id: image
                source: picture
            }

            Text {
                id: text
                text: \"foo\"
            }
        }
}
        "


        rightCode: "
Image {
    id: image
    source: picture

    Text {
        id: text
        text: \"foo\"
    }
}
            "
    }

    Slide {
        title: "Tip 5: Self-contained Widgets"
        content: [
            "Set a minimal size",
            "Have the dependencies\n (or stubs)",
            "Test properties \nagainst undefined"
        ]

        Image {
           source: "imgs/input_cellar.png"
           fillMode: Image.PreserveAspectFit
           anchors { right: parent.right; top: parent.top;
                    bottom: parent.bottom;
                    topMargin: -(parent.height * 0.055)
                    bottomMargin: (parent.height * 0.09)
          }

        }

    }

    Slide {
        title: "Tip 6: Object Oriented Programming"
        content: [
            "Use properties to expose configuration",
            "Keep the software modular",
            "Create public interfaces",
            "Keep widgets encapsulated",
            "*Don't* access items directly through ID",
            "Complex apps benefit of a C++ controller"
        ]

    }

    Slide {
        title: "Tip 7: Beware of overuse of ListView"
        content: [
            "Several simple items: Repeaters",
            "2 or 3 items: reconsider the weight\nof an associated model"
        ]

    }


    //------------------------- HARDCORE STUFF ----------------------//
    Slide {
        Text { text: "Last part: QML/C++ tricks"; color: "black";
            anchors { horizontalCenter: parent.horizontalCenter
                verticalCenter: parent.verticalCenter
            }
            font { pixelSize: 42 }
        }
    }

}

